<template>
  <div>
    <Modal
      width="1200"
      v-model="modal"
      title="车辆实时轨迹展示">
      <div class="opt-area-02">
        <div class="left-con">
          <div class="input-frame" style="width: 164px">
            <Input disabled type="text" placeholder="车牌号" style="width: 164px" v-model="params.vehicleNo"/>
          </div>
        </div>
      </div>
      <div id="containerRealTime" :style="{height:offsetheight+'px'}"></div>
    </Modal>
  </div>
</template>

<script>
import img from '../../assets/images/carNew.png'
import { getYwCLzt } from '../../api/eventlist'
import { toTmapLatLng } from '@/libs/gpsConvert'
// import sj from '../record_no_v2/response.json'

export default {
  name: 'aMapRealTimeIndex',
  data () {
    return {
      // sj,
      offsetheight: document.documentElement.clientHeight - 300,
      map: null,
      dataList: [],
      max: 500,
      navgtrSpeed: 100000, // 播放速度
      navgtr: '',
      img,
      modal: false,
      params: {
        vehicleNo: '',
        vehicleColor: ''
      },
      timer: 0,
      endIdx: 0
    }
  },
  methods: {
    initMap (e) {
      let a = toTmapLatLng(e.lat, e.lng)
      this.map = new AMap.Map('containerRealTime', {
        resizeEnable: true,
        center: new AMap.LngLat(a.lng, a.lat),
        // center: [123.412581, 41.805853],
        zoom: 15
      })
      this.createPolyline()
    },
    isSupportCanvas () {
      let elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    createPolyline () {
      var path = []
      let data = this.dataList
      data.forEach(item => {
        let a = toTmapLatLng(item.lat, item.lng)
        path.push(new AMap.LngLat(a.lng, a.lat))
      })
      var polyline = new AMap.Polyline({
        path: path,
        isOutline: true, // 线条是否带描边，默认false
        outlineColor: '#ffeeff', // 线条描边颜色，此项仅在isOutline为true时有效，默认：#000000
        borderWeight: 3, // 描边的宽度，默认为1
        strokeColor: '#3366FF', // 线条颜色，使用16进制颜色代码赋值。默认值为#006600
        strokeOpacity: 1, // 线条透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
        strokeWeight: 4, // 线条宽度，单位：像素
        // 折线样式还支持 'dashed'
        strokeStyle: 'dashed', // 线样式，实线:solid，虚线:dashed
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 5], // 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效
        lineJoin: 'round', // 折线拐点的绘制样式，默认值为'miter'尖角，其他可选值：'round'圆角、'bevel'斜角
        lineCap: 'round', // 折线两端线帽的绘制样式，默认值为'butt'无头，其他可选值：'round'圆头、'square'方头
        zIndex: 50 // 折线覆盖物的叠加顺序。默认叠加顺序，先添加的线在底层，后添加的线在上层。通过该属性可调整叠加顺序，使级别较高的折线覆盖物在上层显示默认zIndex：50、
      })
      // 将折线添加至地图实例
      this.map.add(polyline)
    },
    createMaker (e) {
      var marker = new AMap.Marker({
        iconLabel: '起', // 文字描述
        position: new AMap.LngLat(e.lng, e.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '起',
        icon: new AMap.Icon({
          image: img,
          size: new AMap.Size(52, 52), // 图标大小
          imageSize: new AMap.Size(26, 26)
        }),
        offset: new AMap.Pixel(-10, -10)
      })
      this.map.add(marker)
    },
    init (e) {
      this.params.vehicleNo = e.BRANUM
      this.params.vehicleColor = e.BRACOLOR
      this.dataList = []
      /** 假
       let data = sj
       let _this = this
       let index = 0
       setInterval(function () {
        _this.dataList.push(data[index])
        _this.map && _this.map.destroy()
        _this.initMap(data[index])
        _this.createMaker(data[index])
        index++
      }, 3000)
       **/
      /**
       * 真
       **/
      let that = this
      function initSetInterval () {
        that.getYwCLzt()
        return initSetInterval
      }
      setInterval(initSetInterval(), 60 * 1000)
      this.modal = true
    },
    getYwCLzt () {
      let data = {
        BRANUM: this.params.vehicleNo,
        BRACOLOR: this.params.vehicleColor
      }
      getYwCLzt(data).then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          this.dataList.push(result)
          this.map && this.map.destroy()
          this.initMap(result)
          this.createMaker(result)
        } else {
          this.$Notice.error({ title: '查询失败', desc: ret.data.errmsg })
        }
      })
    }
  },
  watch: {
    modal (val) {
      if (!val) {
        this.map && this.map.destroy()
      }
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.map && this.map.destroy()
  }
}
</script>

<style scoped>
#containerRealTime {
  padding: 0;
  /*// width: 100%;*/
  /*//height: 400px;*/
}
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.demo-spin-container{
  display: inline-block;
  width: 100%;
  /*//height: 400px;*/
  position: relative;
  /*//border: 1px solid #eee;*/
}
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 1px solid #abdcff;
  background-color: #f0faff;
  padding: 8px 16px 8px 16px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}
</style>
